<template>
    <div class="ranking" v-if="rankingArr">
        <!-- <h2>排行</h2> -->
        <div class="rankingKind" v-show="!flat">
            <span @click="change(3)" :class="active == 3 ? 'active' : ''">日榜</span>
            <span @click="change(4)" :class="active == 4 ? 'active' : ''">国漫榜</span>
            <span @click="change(1)" :class="active == 1 ? 'active' : ''">免费榜</span>
        </div>
        <ranking-list-vue v-show="!flat" :rankingArr="rankingArr"></ranking-list-vue>
        <loading v-show="flat"></loading>
    </div>
</template>

<script>
import { homeHot } from "../../request/index";

import rankingListVue from "../../components/rankingList.vue";
import loading from "@/components/loading.vue";
export default {
    name: "ranking",
    components: {
        rankingListVue,
        loading,
    },
    data() {
        return {
            active: 3,
            rankingArr: [],
            flat: true,
        };
    },
    methods: {
        getHomeHot() {
            homeHot({ type: this.active })
                .then((data) => {
                    this.rankingArr = data.data;
                    return this.rankingArr;
                })
                .then((content) => {
                    this.flat = false;
                });
        },
        change(x) {
            if (this.active != x) {
                this.active = x;
                this.getHomeHot();
            } else {
                return;
            }
        },
    },
    created() {
        this.getHomeHot();
    },
};
</script>

<style lang="scss" scope>
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";

.rankingKind {
    height: 0.7467rem;
    margin: 0.32rem 0.1067rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    span {
        display: block;
        height: 0.4267rem;
        width: 0.96rem;
        padding: 0.16rem 0.48rem;
        border-radius: 0.32rem;
        background: rgb(231, 231, 231);
        font-size: 0.32rem;
        text-align: center;
        line-height: 0.4267rem;
        &.active {
            background: rgba(255, 95, 140, 0.08);
            color: $activeColor;
        }
    }
}
</style>
